<template>
	<view class="">
		<view class="quickValuation">
			<view class="contentBox">
				<view class="pages" style="background-color: #fff;">
					<view class="_flex _justify_between textAreaTitle">
						<view class="">
							车主信息
						</view>
					</view>
					<u-cell-group>
						<u-cell-item center value="" :arrow="false" title="姓名">
							<u-input slot="right-icon" v-model="assessInfo.contactPerson" input-align="right"
								type="number" placeholder="请输入姓名" />
						</u-cell-item>
						<u-cell-item center value="" :arrow="false" title="手机号码">
							<u-input slot="right-icon" v-model="assessInfo.phone" input-align="right" type="number"
								placeholder="请输入手机号码" />
						</u-cell-item>
					</u-cell-group>
				</view>
			</view>
			<view class="contentBox" style="background-color: #fff;">
				<view class="pages _flex _justify_between textAreaTitle">
					<view class="">
						车辆信息
					</view>
				</view>
				<u-cell-group>
					<u-cell-item center value="" :value-style="{'color':'#666'}" :arrow="false" title="车架号">
						<view class="_flex align-items_center">
							<u-input style="width: 100%;" v-model="assessInfo.search" :clearable="false"
								input-align="right" type="text" placeholder="请输入或扫描17位车架号" />
							<u-icon style="margin-left: 10rpx;" size="50" name="camera-fill" @click="scanCode"></u-icon>
						</view>

					</u-cell-item>
					<u-cell-item center value="" :value-style="{'color':'#666'}" :arrow="false" title="发动机号">
						<u-input style="width: 100%;" v-model="assessInfo.search" :clearable="false" input-align="right"
							type="text" placeholder="请输入发动机号" />
					</u-cell-item>
					<u-cell-item center :value="assessInfo.carModel" :value-style="{'color':'#666'}" @click="clickCar"
						:arrow="true" title="投诉车型">
					</u-cell-item>
					<u-cell-item center value="" :value-style="{'color':'#666'}" :arrow="false" title="车牌号">
						<u-input style="width: 100%;" v-model="assessInfo.search" :clearable="false" input-align="right"
							type="text" placeholder="请输入车牌号" />
					</u-cell-item>
					<u-cell-item center :value="assessInfo.checkDate" :value-style="{'color':'#666'}"
						@click="ymdshow=true" :arrow="true" title="购车时间"></u-cell-item>
					<u-cell-item center value="" :value-style="{'color':'#666'}" :arrow="false" title="行驶里程">
						<view class="_flex align-items_center">
							<u-input style="width: 100%;" type="number" v-model="assessInfo.kill" :clearable="false"
								input-align="right" placeholder="请输入行驶里程" />
							<text style="margin-left: 10rpx; white-space: nowrap;">万公里</text>
						</view>

					</u-cell-item>
					<u-cell-item center :value="assessInfo.constraintDate" :value-style="{'color':'#666'}"
						@click="constraintshow=true" :arrow="true" title="出现问题时间"></u-cell-item>
					<!-- 					<u-cell-item center :value="assessInfo.addresss" :value-style="{'color':'#666'}"
						@click="cityShow = true" :arrow="true" title="车牌所在地"></u-cell-item> -->

					<u-cell-item center value="" :value-style="{'color':'#666'}" :arrow="false" title="是否发生事故">
						<view class="_flex" style="justify-content: flex-end;">
							<u-radio-group v-model="assessInfo.radioValue1">
								<u-radio shape="circle" name="yes">发生过</u-radio>
								<u-radio shape="circle" name="no">未发生过</u-radio>
							</u-radio-group>
						</view>
					</u-cell-item>
					<u-cell-item center value="" :value-style="{'color':'#666'}" :arrow="false" title="是否人员伤亡">
						<view class="_flex" style="justify-content: flex-end;">
							<u-radio-group v-model="assessInfo.radioValue2">
								<u-radio shape="circle" name="yes">有伤亡</u-radio>
								<u-radio shape="circle" name="no">无伤亡</u-radio>
							</u-radio-group>
						</view>
					</u-cell-item>
					<u-cell-item center value="" :value-style="{'color':'#666'}" :arrow="false" title="经销商名称">
						<u-input style="width: 100%;" v-model="assessInfo.search" :clearable="false" input-align="right"
							type="text" placeholder="请输入经销商名称" />
					</u-cell-item>
				</u-cell-group>
			</view>
			
			<view class="contentBox" style="background-color: #fff;">
				<view class="" style="background-color: #fff;">
					<view class="pages _flex _justify_between textAreaTitle">
						<view class="">
							投诉内容
						</view>
					</view>
				<u-cell-group>
					<u-cell-item center :value="assessInfo.depart" :value-style="{'color':'#666'}"
						@click="departShow = true" :arrow="true" title="投诉质量部位"></u-cell-item>
				</u-cell-group>
					<view class="pages">
						<view class="">
							<u-input v-model="assessInfo.remark" maxlength="1000" placeholder="请输入详细内容,1000字以内"
								type="textarea" />
						</view>
						<view class="" style="color: #888;font-size: 24rpx;    text-align: right;">
							{{assessInfo.remark.length}}/1000
						</view>
					</view>
				</view>
			</view>
			<view class="page">
				<u-button type="primary" class="quickValuationButton" @click="quickValuationStart">提交</u-button>
			</view>
		</view>
		<u-picker mode="time" v-model="ymdshow" :params="paramTime" @confirm="checkConfirmDate"></u-picker>
		<u-picker mode="time" v-model="constraintshow" :params="paramTime" @confirm="constraintConfirmDate"></u-picker>
		<u-picker mode="time" v-model="busishow" :params="paramTime" @confirm="busiConfirmDate"></u-picker>
		<u-select v-model="departShow" :list="departList" @confirm="departConfirm"></u-select>
		<u-picker mode="time" :defaultTime="defaultTime" v-model="showDate" :params="params" @confirm="confirmDate">
		</u-picker>
		<city-select v-model="cityShow" @city-change="cityChange"></city-select>
	</view>
</template>

<script>
	import {
		URL,
		BASEURL
	} from "../../config.js"
	import app from "../../App.vue"
	import citySelect from "../../components/citySelect/u-city-select.vue"
	export default {
		components: {
			citySelect,
		},
		data() {
			return {
				assessInfo: {
					radioValue: "use",
					radioValue1: "no",
					radioValue2: "no",
					radioValue3: "no",
					radioValue4: "person",
					carModel: '请选择车型',
					depart: '请选择投诉质量部位',
					date: '请选择首次上牌日期',
					color: '请选择车身颜色',
					telphoneTalk: false,
					mileage: '', //行驶里程
					checkDate: "请选择购车时间",
					constraintDate: "请选择出现问题时间",
					busiDate: "请选择商业险到期时间",
					solgan: "",
					remark: "",
					auditCheck: true
				},
				action: 'http://www.example.com/upload',
				fileList: [],
				defaultTime: '',
				showDate: false,
				ymdshow: false,
				constraintshow: false, //交强险时间
				busishow: false, //商业险时间
				departShow: false, //车身部位
				departList: [{
						value: '1',
						label: '底盘'
					},
					{
						value: '2',
						label: '电池'
					},
					{
						value: '3',
						label: '内饰'
					},
					{
						value: '4',
						label: '轮胎'
					},
					{
						value: '5',
						label: '喷漆'
					},
				],
				params: {
					year: true,
					month: true,
				},
				paramTime: {
					year: true,
					month: true,
					day: true,
				},
				cityShow: false,
				codeShow: true,
				codeTips: 30,
				form: {},
			};
		},
		onShow() {
			console.log(app.globalData.carTypeName)
			if (app.globalData.carTypeName) {
				this.assessInfo.carModel = app.globalData.carTypeName
			} else {
				this.assessInfo.carModel = '请选择车型'
			}
		},
		methods: {
			// 选择车型
			clickCar() {
				uni.navigateTo({
					url: "../selectCar/selectCar"
				})
			},
			// 年检时间
			checkConfirmDate(date) {
				console.log(date)
				this.assessInfo.checkDate = date.year + '-' + date.month + '-' + date.day
			},
			// 交强险时间
			constraintConfirmDate(date) {
				console.log(date)
				this.assessInfo.constraintDate = date.year + '-' + date.month + '-' + date.day
			},
			// 商业险时间
			busiConfirmDate(date) {
				console.log(date)
				this.assessInfo.busiDate = date.year + '-' + date.month + '-' + date.day
			},
			// 审核标准
			auditStandard() {
				uni.navigateTo({
					url: "./auditStandard"
				})
			},
			scanCode() {
				var that = this;
				uni.scanCode({
					success: function(res) {
						console.log(res)
					}
				});
			},
			// 城市选择
			cityChange(e) {
				if (e.province.label == "天津市" || e.province.label == "北京市" || e.province.label == "上海市" || e.province
					.label == "重庆市" || e.province.label == "香港" || e.province.label == "澳门") {
					this.assessInfo.addresss = e.province.label;
				} else {
					this.assessInfo.addresss = e.city.label;
				}

			},
			// 车身颜色
			departConfirm(e) {
				console.log(e)
				this.assessInfo.depart = e[0].label
			},
			// 选择日期
			clickDate() {
				let date = new Date();
				this.defaultTime = date.getFullYear() + '-' + (date.getMonth() + 1);
				this.showDate = true;
			},
			// 日期确定
			confirmDate(date) {
				this.assessInfo.date = date.year + '-' + date.month
			},
			// 获取验证码
			getCode() {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码',
					mask: true
				})
				this.codeShow = false
				this.codeTips = setInterval(() => {
					this.codeTips--
					if (this.codeTips === 0) {
						this.codeShow = true
						clearInterval(this.codeTips)
					}
				}, 1000)
				setTimeout(() => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					this.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				}, 2000);
			},
			quickValuationStart() {
				uni.showToast({
					title: "提交成功，客服24小时内联系",
					icon: "none"
				})
			}
		}
	};
</script>
<style scoped>
	.introduc {
		color: #888888;
		font-size: 24rpx;
		text-align: center;
		margin-top: 40rpx;
	}

	.textAreaTitle {
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
		font-weight: bold;
	}
</style>
